<template>
    <div class="outputpdf-body" v-loading="loading">
        <div class="ctn">
            <div class="pdf-ctn">
                <div class="pdf-panel" v-if="runningReportData">
                    <!--	首页	-->
                    <div class="a4main">
                        <div class="title">PDF文档标题</div>
                        <div class="table">
                            <div class="tr">
                                <div class="td">企业名称</div>
                                <div class="td" id="companyName"></div>
                            </div>
                            <div class="tr">
                                <div class="td">运行周期</div>
                                <div class="td" id="runCycle"></div>
                            </div>
                            <div class="tr">
                                <div class="td">报告</div>
                                <div class="td" id="a4Report"></div>
                            </div>
                            <div class="tr">
                                <div class="td">日期</div>
                                <div class="td" id="a4Date"></div>
                            </div>
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="page-skip2"></div>
                    <!--	声明页面	-->
                    <div class="statement">
                        <div class="title">
                            声明
                        </div>
                        <div class="content">
                            本报告版权仅为本公司所有，未经事先书面许可，任何机构和个人不得以任何形式翻版、
                            复制、发表、转发或引用本报告的任何部分。如征得本公司同意进行引用、刊发的，需
                            在允许的范围内使用，并注明出处为“XXXXXXX有限公司研究中心”，且不得对本
                            报告进行任何有悖原意的引用、删节和修改。
                        </div>
                        <div class="title title2">
                            STATEMENT
                        </div>
                        <div class="content content2">
                            The copyright of this report is solely owned by the Company and may not be reproduced in any form by any organization or individual without prior written permission,
                            reproduce, publish, forward or quote any part of this report in any form without prior written permission. If you obtain the company's consent to quote or publish, you must
                            If the Company agrees to quote or publish, it should be used within the permitted scope and indicate the source as "Research Center of Anxin Securities Company Limited", and should not make any statement contrary to the original intent of this report.
                            and shall not make any quotation, abridgement or modification of this report that is contrary to the original intent.
                        </div>
                    </div>
                    <!-- 分页 -->
                    <div class="page-skip2"></div>

                    <!-- 设备信息汇总 -->
                    <div id="deviceInfos" class="allInfo">
                        <h3 style="color: black">一.标题一</h3>
                        <table class="deviceInfos-table" v-for="(item,index) in runningReportData.deviceInfos" :key="item.id">
                            <thead>
                            <tr>
                                <th colspan="2" style="font-weight: 500;">{{ index+"-"+item.name+"-"+item.faultLevel }}</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="basics-tr">
                                <td>参数一</td>
                                <td>{{item.sn}}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数二</td>
                                <td>{{ item.model }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数散</td>
                                <td>{{ item.workingEnvironment }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数四</td>
                                <td>{{ item.ratio }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数五</td>
                                <td>{{ item.rpm }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数六</td>
                                <td>{{ item.workingStatus }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数七</td>
                                <td>{{ item.frequencyDesc }}</td>
                            </tr>
                            <tr class="basics-tr">
                                <td>参数八</td>
                                <td>{{ item.loadType }}</td>
                            </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- 分页 -->
                    <div class="page-skip"></div>

                    <!-- 设备监测详情 -->
                    <div id="detection">
                        <h3 style="color: black">二.标题二</h3>
                        <div class="detection" v-for="(item,index) in runningReportData.monitorDetails" :key="item.deviceId">
                            <table :key="item.deviceId">
                                <thead>
                                <tr class="detection-tr">
                                    <th colspan="2">{{ index + 1 +". "+item.deviceName }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <template v-for="(e, i) in item.monitors">
                                    <template v-for="(m, n) in e.series">
                                        <tr class="detection-tr">
                                            <td class="tdTit">{{ m.monitorName }}</td>
                                        </tr>
                                        <tr class="detection-tr">
                                            <td class="tdTit">
                                                <div class="itemEcharts descriptions-echarts" :id="'monit' + index + i + n"></div>
                                            </td>
                                        </tr>
                                    </template>
                                </template>
                                <tr class="detection-tr">
                                    <td class="tdTit">润滑油时间</td>
                                </tr>
                                <tr class="detection-tr">
                                    <td>
                                        <div class="itemTxt">
                                            <div class="txtItem">最新换油时间: {{ item.oilTime.nowTime }}</div>
                                            <div class="txtItem">运行时间: {{ item.oilTime.runTime }}小时</div>
                                            <div class="txtItem">上次换油: {{ item.oilTime.lastOilChangeTime }}</div>
                                            <div class="txtItem">距离下次换油时间: {{ item.oilTime.nextOilChangeTime }}小时</div>
                                        </div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <div class="page-skip"></div>

                    <!-- 历史报警信息 -->
                    <div id="historical">
                        <h3 style="color: black">三.标题三</h3>
                        <div class="historical historical-table-div" v-for="(item,index) in runningReportData.historicalAlarmInfo" :key="item.id">
                            <table :key="item.id">
                                <thead>
                                <tr>
                                    <th colspan="2">{{ index + 1 +". "+item.deviceName }}</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="basics-tr">
                                    <td>告警序号</td>
                                    <td>{{ index + 1 }}</td>
                                </tr>
                                <tr class="basics-tr">
                                    <td>监测名称</td>
                                    <td>{{ item.monitorName + item.monitorItemName }}</td>
                                </tr>
                                <tr class="basics-tr">
                                    <td>告警状态</td>
                                    <td>{{ item.monitorstatus }}</td>
                                </tr>
                                <tr class="basics-tr">
                                    <td>告警时间</td>
                                    <td>{{ item.alarmTime }}</td>
                                </tr>
                                <tr class="basics-tr">
                                    <td>解除时间</td>
                                    <td>{{ item.cancelTime }}</td>
                                </tr>
                                <tr class="basics-tr">
                                    <td>告警次数</td>
                                    <td>{{ item.alarmCount }}</td>
                                </tr>
                                <tr>
                                    <td class="tdTit">
                                        <div class="itemEcharts descriptions-echarts" :id="'history' + index"></div>
                                    </td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 工具栏 -->
        <div class="navigation">
            <a-button type="primary" @click="handleOutput" v-loading="handleOutputLoading">下 载</a-button>
        </div>
        <!-- 页眉 -->
        <div class="pdf-header"
             style="position: fixed; top: -100vh;">
            <div class="headerCon">
                <h1 class="headerTitle">
                    SEW 智能监测系统设备运行报告
                </h1>
                <img class="sewpng" :src="sewpng" style="width: 10.52vw;height: 4.687vw;"></img>
            </div>
            <!-- <div class="pageNum">
              Page : <div class="pdf-footer-page"></div> / <div class="pdf-footer-page-count"></div>
            </div> -->
        </div>
        <!-- 页脚 -->
        <div class="pdf-footer"
             style="font-weight: bold; padding: 15px 8px; width: 100%; border-top: 1px solid rgba(0, 0, 0, 0.85); position: fixed; top: -100vh;">
            <div style="display: flex; justify-content: center; align-items: center; padding-top: 5px;">
                我是页尾
            </div>
            <div style="display: flex; justify-content: center; align-items: center; margin-top: 20px;">
                第<div class="pdf-footer-page"></div>页 / 第<div class="pdf-footer-page-count"></div>页
            </div>
        </div>
    </div>
</template>

<script>
// import {getRunningReportData} from "@/api/monitor/diagnosis/diagnosis";

import sewpng from "@/assets/logo.png"
import { outputPDF } from "../pdf"


export default {
    name: "outputPDF",
    // props: {
    // 	runningReportParams: {
    // 		type: Object,
    // 		default: () => {
    // 		}
    // 	}
    // },
    data() {
        return {
            loading: true,
            handleOutputLoading: false,
            runningReportData: null,
            sewpng: sewpng,
            // echarts对象
            refsArr: [],
            // dom对象
            pdfPanel: null,
            pdfCtn: null,
            // 分割后的dom对象数组
            resultChunks:[],
            // 进度数据
            progress: 1,
            // 生成pdf文件名
            pdfFileName: "",
        }
    },
    created() {
        let runningData = require("../assets/runningReportData.json");
        this.runningReportData = runningData.data;
        // this.getRunningReportData(this.$route.query);
    },
    updated() {
        this.$nextTick(() => {
            this.drawEcharts();
        });
        // this.drawEcharts();
    },
    methods: {
        // 获取运行报告数据
        // getRunningReportData(params) {
        //     getRunningReportData(params)
        //         .then(res => {
        //             this.runningReportData = res.data.data;
        //             // pdf文件名
        //             this.pdfFileName = this.runningReportData.deptName + " " + this.runningReportData.periodic + " " + this.runningReportData.userName + " " + this.runningReportData.date;
        //             this.loading = false;
        //         });
        // },

        drawEcharts() {
            const a4main = document.querySelector('.a4main');
            a4main.querySelector('#companyName').innerText = this.runningReportData.deptName;
            a4main.querySelector('#runCycle').innerText = this.runningReportData.periodic;
            a4main.querySelector('#a4Report').innerText = this.runningReportData.userName;
            a4main.querySelector('#a4Date').innerText = this.runningReportData.date;
            // var refsArr = [];
            for(let index = 0; index < this.runningReportData.monitorDetails.length; index++) {
                for(let i = 0; i < this.runningReportData.monitorDetails[index].monitors.length; i++) {
                    for(let n = 0; n < this.runningReportData.monitorDetails[index].monitors[i].series.length; n++) {
                        this.refsArr[ 'monit' + index + i + n ] = this.$echarts.init(document.querySelector('#monit' + index + i + n));
                        this.refsArr[ 'monit' + index + i + n ].setOption({
                            legend: {
                                // Try 'horizontal'
                                orient: 'vertical',
                                right: 0,
                                // icon: 'path://M 0 50 h 10',
                                data: [ this.runningReportData.monitorDetails[index].monitors[i].series[n].name ]
                            },
                            grid: {
                                x: 80,
                                y: 30,
                                x2: 30,
                                y2: 30
                            },
                            xAxis: {
                                type: 'category',
                                data: this.runningReportData.monitorDetails[index].monitors[i].times
                            },
                            yAxis: {
                                type: 'value'
                            },
                            series: [
                                {
                                    name: this.runningReportData.monitorDetails[index].monitors[i].series[n].name,
                                    data: this.runningReportData.monitorDetails[index].monitors[i].series[n].data,
                                    type: 'line',
                                    showSymbol: 'false',
                                    symbolSize: 0,
                                    lineStyle: {
                                        normal: {
                                            color: 'green'
                                        }
                                    }
                                }
                            ]
                        });
                    }
                }
            }
            for(let index = 0; index < this.runningReportData.historicalAlarmInfo.length; index++) {
                this.refsArr[ 'history' + index ] = this.$echarts.init(document.querySelector('#history' + index));
                var timestamps = this.runningReportData.historicalAlarmInfo[index].monitorValues.data.map(item => item.timestamp);
                var values = this.runningReportData.historicalAlarmInfo[index].monitorValues.data.map(item => item.value);
                this.refsArr[ 'history' + index ].setOption({
                    grid: {
                        x: 80,
                        y: 30,
                        x2: 80,
                        y2: 30
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: timestamps
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: values,
                            type: 'line',
                            showSymbol: 'false',
                            symbolSize: 0,
                        },
                        {
                            type: 'custom',
                            renderItem: (param, api)=>{
                                let bandWidth = api.size([0, 0])[0] * (timestamps.length); // data为总数据量
                                let itemWidth = api.size([0, 0])[0]
                                let point = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: 'line',
                                    transition: ['shape'],
                                    shape: {
                                        x1: point[0] - itemWidth*0.5,
                                        x2: point[0] + bandWidth - itemWidth*0.5,
                                        y1: point[1],
                                        y2: point[1]
                                    },
                                    style: api.style({ // 直线配置
                                        fill: null,
                                        stroke: api.visual('color'),
                                        lineWidth: 2 // 线宽
                                    })
                                };
                            },
                            encode: {
                                x: 0,
                                y: 1
                            },
                            color: 'red',
                            data: [this.runningReportData.historicalAlarmInfo[index].monitorValues.alarmValue],
                            label: {
                                show: false,
                            },
                        },
                        {
                            type: 'custom',
                            renderItem: (param, api)=>{
                                let bandWidth = api.size([0, 0])[0] * (timestamps.length); // data为总数据量
                                let itemWidth = api.size([0, 0])[0]
                                let point = api.coord([api.value(0), api.value(1)]);
                                return {
                                    type: 'line',
                                    transition: ['shape'],
                                    shape: {
                                        x1: point[0] - itemWidth*0.5,
                                        x2: point[0] + bandWidth - itemWidth*0.5,
                                        y1: point[1],
                                        y2: point[1]
                                    },
                                    style: api.style({ // 直线配置
                                        fill: null,
                                        stroke: api.visual('color'),
                                        lineWidth: 2 // 线宽
                                    })
                                };
                            },
                            encode: {
                                x: 0,
                                y: 1
                            },
                            color: '#ffea00',
                            data: [this.runningReportData.historicalAlarmInfo[index].monitorValues.earlyWarningValue],
                            label: {
                                show: false,
                            },
                        },
                    ],
                    markLine: {
                        symbol: ['none', 'none'],//去掉箭头
                        itemStyle: {
                            normal: {
                                lineStyle: {
                                    color: ['red', 'yellow']
                                },
                                label: {
                                    show: false
                                }
                            }
                        },
                        data: [
                            {
                                yAxis: this.runningReportData.historicalAlarmInfo[index].monitorValues.alarmValue,
                            },
                            {
                                yAxis: this.runningReportData.historicalAlarmInfo[index].monitorValues.earlyWarningValue
                            }
                        ]
                    }
                })
            }
        },

        // 分割dom的方法
        splitDOMByElement(parentElement, splitElementClassName) {
            // 获取所有子元素
            var children = parentElement.children;

            // 创建一个数组，用于存放分割后的小段
            var chunks = [];
            var currentChunk = document.createElement('div');

            // 迭代子元素
            for (var i = 0; i < children.length; i++) {
                var child = children[i];

                // 复制子元素并添加到当前小段
                var clonedChild = child.cloneNode(true);
                currentChunk.appendChild(clonedChild);

                // 如果当前子元素是分割元素，则将当前小段添加到结果数组中，并重置当前小段
                if (child.classList.contains(splitElementClassName)) {
                    chunks.push(currentChunk);
                    currentChunk = document.createElement('div');
                }

                // 设备信息汇总 超长分段
                // 处理特定id为 "detection" 的<div>，按class="detection"分割为每5个一组
                if (child.id === 'deviceInfos') {
                    var deviceInfosTable = child.getElementsByClassName('deviceInfos-table');

                    for (var j = 0; j < deviceInfosTable.length; j++) {
                        var deviceInfosTableChild = deviceInfosTable[j];
                        var clonedDeviceInfosTableChild = deviceInfosTableChild.cloneNode(true);
                        currentChunk.appendChild(clonedDeviceInfosTableChild);

                        // 查看是否有标题元素
                        var h3Element = currentChunk.querySelector('h3');
                        // 检查是否成功获取了 <h3> 元素
                        if (h3Element) {
                            // 获取 <h3> 元素的父元素
                            var parentDiv = h3Element.parentNode;
                            // 获取父元素中所有具有 class="detection" 的子元素
                            var detectionElements = parentDiv.querySelectorAll('.deviceInfos-table');
                            // 遍历并移除每个具有 class="detection" 的子元素
                            detectionElements.forEach(function(detectionElement) {
                                detectionElement.remove();
                            });
                        }

                        // 当达到每50个一组时，添加到结果数组中，并重置当前小段
                        // 设备信息汇总 每50组的长度大约为10页
                        if ((j + 1) % 100 === 0) {
                            chunks.push(currentChunk);
                            currentChunk = document.createElement('div');
                        }
                    }
                }

                // 设备监测详情 超长分段
                // 处理特定id为 "detection" 的<div>，按class="detection"分割为每5个一组
                if (child.id === 'detection') {
                    var detectionChildren = child.getElementsByClassName('detection');

                    for (var j = 0; j < detectionChildren.length; j++) {
                        var detectionChild = detectionChildren[j];
                        var clonedDetectionChild = detectionChild.cloneNode(true);
                        currentChunk.appendChild(clonedDetectionChild);

                        if ((j + 1) % 5 === 0) {
                            // 查看是否有标题元素
                            var h3Element = currentChunk.querySelector('h3');
                            // 检查是否成功获取了 <h3> 元素
                            if (h3Element) {
                                // 获取 <h3> 元素的父元素
                                var parentDiv = h3Element.parentNode;
                                // 获取父元素中所有具有 class="detection" 的子元素
                                var detectionElements = parentDiv.querySelectorAll('.detection');
                                // 遍历并移除每个具有 class="detection" 的子元素
                                detectionElements.forEach(function(detectionElement) {
                                    detectionElement.remove();
                                });
                            }
                            // 当达到每5个一组时，添加到结果数组中，并重置当前小段
                            // 设备监测详情 每5组的长度大约为10页
                            chunks.push(currentChunk);
                            currentChunk = document.createElement('div');
                        }
                    }
                }

                // 历史报警信息 超长分段
                // 处理特定id为 "detection" 的<div>，按class="detection"分割为每5个一组
                if (child.id === 'historical') {
                    var historicalTableDivChildren = child.getElementsByClassName('historical-table-div');

                    for (var j = 0; j < historicalTableDivChildren.length; j++) {
                        var historicalTableDivChild = historicalTableDivChildren[j];
                        var clonedHistoricalTableDivChild = historicalTableDivChild.cloneNode(true);
                        currentChunk.appendChild(clonedHistoricalTableDivChild);

                        // 查看是否有标题元素
                        var h3Element = currentChunk.querySelector('h3');
                        // 检查是否成功获取了 <h3> 元素
                        if (h3Element) {
                            // 获取 <h3> 元素的父元素
                            var parentDiv = h3Element.parentNode;
                            // 获取父元素中所有具有 class="detection" 的子元素
                            var detectionElements = parentDiv.querySelectorAll('.historical-table-div');
                            // 遍历并移除每个具有 class="detection" 的子元素
                            detectionElements.forEach(function(detectionElement) {
                                detectionElement.remove();
                            });
                        }

                        // 当达到每5个一组时，添加到结果数组中，并重置当前小段
                        // 历史报警信息 每30组的长度大约为10页
                        if ((j + 1) % 60 === 0) {
                            chunks.push(currentChunk);
                            currentChunk = document.createElement('div');
                        }
                    }
                }

            }

            // 将最后一个小段添加到结果数组中
            if (currentChunk.children.length > 0) {
                chunks.push(currentChunk);
            }

            return chunks;
        },

        // 打印下载
        async handleOutput() {
            // 下载提示
            this.handleOutputLoading = true;
            this.$message.warning("正在下载中，请勿重复点击，" + "生成进度："+ this.progress + "%",0);
            // this.option = this.$message({
            //     message: "正在下载中，请勿重复点击，" + "生成进度："+ this.progress + "%",
            //     type: "warning",
            //     duration:0,
            // });
            const element = document.querySelector('.pdf-panel');

            this.pdfPanel = element;
            this.pdfCtn = element.parentNode;

            const header = document.querySelector('.pdf-header');
            const footer = document.querySelector('.pdf-footer');
            const a4main = document.querySelector('.a4main');
            a4main.querySelector('#companyName').innerText = this.runningReportData.deptName;
            a4main.querySelector('#runCycle').innerText = this.runningReportData.periodic;
            a4main.querySelector('#a4Report').innerText = this.runningReportData.userName;
            a4main.querySelector('#a4Date').innerText = this.runningReportData.date;
            try {
                // 例子的使用方式
                var splitElementClassName = 'page-skip';

                this.resultChunks = this.splitDOMByElement(element, splitElementClassName);

                // 重新添加dom前销毁echarts元素
                for (const i in this.refsArr) {
                    this.refsArr[i].dispose();
                }

                // 获取父元素
                const parentElement = element.parentNode;

                // 将小段添加到DOM中，这里只是演示，实际使用时可以根据需要进行其他处理
                this.resultChunks.forEach(function(chunk) {
                    // document.body.appendChild(chunk);
                    parentElement.appendChild(chunk);
                });

                // 检查元素是否存在
                if (element) {
                    // 从父元素中移除指定的子元素
                    parentElement.removeChild(element);
                }

                this.drawEcharts();

                // 开启前端多线程 Worker
                // 创建一个web worker
                const worker = new Worker(URL.createObjectURL(new Blob([`
					onmessage = function(e) {
						postMessage('Worker: Message received from main script');
						var data = e.data;
						switch (data.cmd) {
						case 'start':
							// 在这里执行你的操作
							break;
						default:
							postMessage('Unknown command');
						};
					}
				`], { type: 'text/javascript' })));

                // worker.addEventListener('message', function (e) {
                //   console.log('Worker said: ', e.data);
                // }, false);

                // 启动worker
                worker.postMessage({ cmd: 'start' });

                // jsPDF对象
                let jsPDFObject = null;

                var allPages = [];

                for (const [index, item] of this.resultChunks.entries()) {
                    // 判断是不是最后一个
                    const isFinally = Boolean(this.resultChunks.length - 1 === index);

                    let outputPDFData = await outputPDF({
                        element: this.resultChunks[index],
                        footer: footer,
                        header: header,
                        contentWidth: 560,
                        filename:this.pdfFileName,
                        jsPDFObject,
                        isFinally,
                        allPages
                    });

                    // 修改进度
                    this.progress = (index + 1) / this.resultChunks.length * 100;
                    this.option ? this.option.close():'';
                    this.$message.warning("正在下载中，请勿重复点击，" + "生成进度："+ this.progress + "%",0);
                    // this.option = this.$message({
                    //     message: "正在下载中，请勿重复点击，" + "生成进度：" + this.progress + "%",
                    //     type: "warning",
                    //     duration:0,
                    // });

                    jsPDFObject = outputPDFData.pdf;
                    allPages = outputPDFData.allPages;
                }

                // 关闭多线程
                worker.postMessage({ cmd: 'stop' });

                // 将dom元素恢复原样
                // 清空 <div class="pdf-ctn"> 中的所有元素
                this.pdfCtn.innerHTML = '';
                // 将 <div class="pdf-panel"> 添加到 <div class="pdf-ctn"> 中
                this.pdfCtn.appendChild(this.pdfPanel);
                this.resultChunks = [];
                this.pdfPanel = null;
                this.pdfCtn = null;
                this.progress = 1;
                this.pdfFileName = "";

                // 成功的消息提示
                this.option ? this.option.close():'';
                this.$message.success(`下载成功`)
                this.handleOutputLoading = false;

                // setTimeout(() => {
                // 	outputPDF({
                // 		element: resultChunks[0],
                // 		footer: footer,
                // 		header: header,
                // 		a4main: a4main,
                // 		statement: statement,
                // 		contentWidth: 560
                // 	}).then(() => {
                // 		// 成功的消息提示
                // 		this.option ? this.option.close():'';
                // 		this.$message.success(`下载成功`)
                // 		this.handleOutputLoading = false;
                // 	})
                // }, 1000);
            } catch (error) {
                this.resultChunks = [];
                this.progress = 1;
                this.pdfFileName = "";
                this.option ? this.option.close():'';
                this.handleOutputLoading = false;
                console.log(error,"error")
                // message.error(typeof error === 'string' ? error : JSON.stringify(error))
            }
        }
    }

};
</script>

<style scoped  lang="less">
* {
  box-sizing: border-box;
  font-family: "宋体", "微软雅黑", "黑体";
}

.outputpdf-body{
  //margin: 50px;
  height: 100%;
  overflow : auto;
}

.navigation {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 98%;
  height: 10vh;
  background-color: #fff;
  //box-shadow:0 0 6px rgba(0, 0, 0, .04)
}

.ctn {
  display: flex;
  justify-content: center;
  .pdf-ctn {
    width: 1300px;
    margin-bottom: 15vh;
    .pdf-panel {
      position: relative;
      padding-top: 100px;
    }
  }
}

.allInfo {
  width: 100%;
  //border: 1px solid #333;

  table {
    width: 100%;
  }

  thead {
    height: 36px;
    background-color: #bfbfbf;
    color: #000;
    font-size: 18px;
  }
}

.deviceInfos-table{
  width: 100%;
  thead {
    height: 36px;
    background-color: #bfbfbf;
    color: #000;
    font-size: 18px;
  }
}

.detection {
  width: 100%;

  table {
    width: 100%;
  }

  tr {
    height: 36px;
    color: #000;

    .itemEcharts {
      width: 100%;
      height: 180px;
    }

    .itemTxt {
      margin-left: 40px;
      height: 120px;
      display: flex;
      justify-content: center;
      flex-direction: column;

      .txtItem {

      }
    }
  }

  thead {
    width: 100%;
    height: 36px;
    color: #000;
    font-size: 18px;
  }
}

.historical {
  width: 100%;

  table {
    width: 100%;
  }

  tr {
    height: 36px;
    color: #000;

    .itemEcharts {
      width: 100%;
      height: 180px;
    }

    .itemTxt {
      margin-left: 40px;
      height: 120px;
      display: flex;
      justify-content: center;
      flex-direction: column;

      .txtItem {

      }
    }
  }

  thead {
    width: 100%;
    height: 36px;
    color: #000;
    font-size: 18px;
  }

  tbody {
    width: 100%;
  }

  .basics-tr {
    td:nth-child(2) {
      justify-content: center;
    }
  }
}

.basics-tr {
  height: 36px;
  color: #000;
  display: flex;

  td:first-child {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #bfbfbf;
  }

  td:nth-child(2) {
    width: calc(100% - 20%);
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

/deep/table{
  border-collapse: collapse;
}

th, td {
  border: 1px solid #333;
}

.pdf-header {
  font-weight: bold;
  padding: 1.5vw 3.3vw;
  width: 100%;
  color: rgba(0, 0, 0, 0.85);
  margin: 0;

  .headerCon {
    width: 100%;
    border-bottom: 0.25vw solid rgba(0, 0, 0, 0.85);
    display: flex;
    justify-content: space-between;

    .headerTitle {
      font-size: 2.1875vw;
      transform: translate(2%, 65%);
      line-height: 2.1875vw;
      margin-left: 0.5vw;
    }

    .sewpng {
      width: 15%;
      transform: translate(0%, 10%);
      margin-top: -0.2vw;
    }
  }

  /* .pageNum {
      width: 100%;
      display: flex;
      justify-content: flex-end;
      font-size: 1.8vw;
      font-weight: 600;

      .pdf-footer-page-count {
          margin-right: 1vw;
      }
  } */
}

.a4main {
  padding-top: 200px;
  width: 100%;
  //height: calc(100vw * sqrt(2));
  // background-color: white;
  .title {
    width: 100%;
    height: 80px;
    font-size: 60px;
    font-weight: bold;
    text-align: center;
    line-height: 70px;
    display: flex;
    justify-content: center;
  }
  .table {
    margin: 0 auto;
    margin-top: 800px;
    width: 68%;
  }
  .table .tr:nth-child(odd) {
    background-color: #bfbfbf;
  }
  .tr {
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 600;
    font-size: 26px;

    .td {
      //height: 4.2vw;
      //line-height: 4.2vw;
    }

    .td:nth-child(odd) {
      width: 32%;
      padding-left: 5px;
    }

    .td:nth-child(even) {
      width: 68%;
    }
  }
}

.statement {
  padding-top: 180px;
  width: 100%;
  //height: calc(100vw * sqrt(2));
  /* background-color: white; */

  .title {
    font-weight: 600;
    font-size: 37.89px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .title2 {
    font-weight: 600;
    margin-top: 260px;
  }

  .content {
    margin-top: 37.89px;
    padding: 0 84.2px;
    font-size: 23.8567px;
    text-align: justify;
    /*兼容ie*/
    text-justify: distribute-all-lines;
    line-height: 34px;
    text-indent: 14px;
  }

  .content2 {
    margin-top: 50px;
    margin-bottom: 400px;
    font-size: 26px;
    text-indent: 40px;
  }
}
</style>
